<template>
  <div class="slider-check-box">
    <div class="slider-check" :class="rangeStatus ? 'success' : ''">
      <div
        @mousedown="rangeMove"
        :class="rangeStatus ? successIcon : startIcon"
      >
        <el-icon class="user-drag" v-if="rangeStatus" color="#79C23D"
          ><circle-check-filled
        /></el-icon>
        <el-icon class="user-drag" v-else color="#959CA9"
          ><d-arrow-right
        /></el-icon>
      </div>
      {{ rangeStatus ? successText : startText }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 成功之后的函数
    successFun: {
      type: Function,
    },
    //成功图标
    successIcon: {
      type: String,
      default: "el-icon-success",
    },
    //成功文字
    successText: {
      type: String,
      default: "验证成功",
    },
    //开始的图标
    startIcon: {
      type: String,
      default: "el-icon-d-arrow-right",
    },
    //开始的文字
    startText: {
      type: String,
      default: "请拖住滑块，拖动到最右边",
    },
    //失败之后的函数
    errorFun: {
      type: Function,
    },
    //或者用值来进行监听
    status: {
      type: String,
    },
     
    
  },
  data() {
    return {
      disX: 0,
      rangeStatus:false,
    };
  },
  mounted(){
  },
  methods: {
    //滑块移动
    rangeMove(e) {
      let ele = e.target;
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth = ele.parentElement.offsetWidth;

      let MaxX = parentWidth - eleWidth;
      if (this.rangeStatus) {
        //不运行
        return false;
      }
      document.onmousemove = (e) => {
        let endX = e.clientX;
        if(( endX - startX)!= this.disX){

        this.disX = endX - startX;
        }
        if (this.disX <= 0) {
          this.disX = 0;
        }
        if (this.disX >= MaxX) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX;
        }
        ele.style.left = this.disX + "px";
      
        e.preventDefault();
      };
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
         ele.style.left = "0px";
          //执行成功的函数
          this.errorFun && this.errorFun();
        } else {
          this.rangeStatus = true;
          if (this.status) {
            this.$parent[this.status] = true;
          }
          //执行成功的函数
          this.successFun && this.successFun();
        }
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
$blue: #198eeb;
@mixin jc-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-check-box {
  .slider-check {
    background: #f3f3f3;
    border-radius: 6px;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #4f5a70;
    @include jc-flex;
    height: 38px;
    overflow: hidden;
    border: 1px solid #dee0e3;
    &.success {
      background-color: #79c23d;
      color: #fff;
      div {
        color: $blue;
      }
    }
    div {
      position: absolute;
      left: 0;
      width: 46px;
      height: 38px;
      color: $blue;
      background-color: #fff;
      cursor: pointer;
      font-size: 24px;
      @include jc-flex;
      .user-drag {
        -webkit-user-drag: none;
        pointer-events: none;
      }
    }
  }
}
</style>